<!doctype html>
<html class="echarts-dashboard">

<head>
    <meta charset="utf-8">
    <title>Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="styles/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="styles/report.css" rel="stylesheet">
</head>

<body class="echarts-dashboard">
    <div class="container-fluid echarts-dashboard">
        <div class="text-center">
            <h2 id="title" class="title">调漆室</h2>
        </div>
        <div class="text-right">
            <input id="language-change" class="btn btn-primary btn-sm btn-change" type="button" value="中文/English" />
        </div>

        <div class="row echarts-row m-auto">
            <div class="col-md-6 col-lg-6" id="echarts-auto-paint-pressure"></div>
            <div class="col-md-6 col-lg-6" id="echarts-auto-paint-flow"></div>
        </div>
        <div class="row echarts-row m-auto">
            <div class="col-md-6 col-lg-6" id="echarts-manual-paint-pressure"></div>
            <div class="col-md-6 col-lg-6" id="echarts-manual-paint-flow"></div>
        </div>
    </div>
    <script type="text/javascript" src="scripts/jquery.slim.min.js"></script>
    <script type="text/javascript" src="styles/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="system/scripts/igrX.js"></script>
    <script type="text/javascript" src="scripts/trend.js"></script>
    <script type="text/javascript" src="scripts/echarts.js"></script>
    <script type="text/javascript">
        var dateAxis = getDateAxis();
        var autoPaintPressureChart = echarts.init(document.getElementById("echarts-auto-paint-pressure"));
        var autoPaintFlowChart = echarts.init(document.getElementById("echarts-auto-paint-flow"));
        var manualPaintPressureChart = echarts.init(document.getElementById("echarts-manual-paint-pressure"));
        var manualPaintFlowChart = echarts.init(document.getElementById("echarts-manual-paint-flow"));
        var displayLanguage = null;
        var app = {};
        optionAutoPaintPressure = {
            title: {
                text: '自动喷房压力',
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '20%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                top: 10,
                right: 10,
                data: ['A泵', 'B泵'],
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dateAxis,
            },
            yAxis: [{
                type: 'value',
                name: '压力',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} KPa'
                },
            }],
            series: [{
                name: 'A泵',
                type: 'line',
                data: [20, 32, 1, 34, 90, 30, 20],
                markLine: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                }
            }, {
                name: 'B泵',
                type: 'line',
                data: [32, 1, 34, 90, 30, 20, 20],
                markLine: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                }
            }]
        }
        optionManualPaintPressure = {
            title: {
                text: '手动喷房压力',
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '20%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                top: 10,
                right: 10,
                data: ['A泵', 'B泵'],
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dateAxis,
            },
            yAxis: [{
                type: 'value',
                name: '压力',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} KPa'
                },
            }],
            series: [{
                name: 'A泵',
                type: 'line',
                data: [20, 32, 1, 34, 90, 30, 20],
                markLine: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                }
            }, {
                name: 'B泵',
                type: 'line',
                data: [32, 1, 34, 90, 30, 20, 20],
                markLine: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                }
            }]
        };
        optionAutoPaintFlow = {
            title: {
                text: '自动喷房流量',
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '20%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                top: 10,
                right: 10,
                data: ['自动喷房流量'],
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dateAxis
            },
            yAxis: [{
                type: 'value',
                name: '流量',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} M^3/s'
                },
            }],
            series: [{
                name: '自动喷房流量',
                type: 'line',
                data: [30, 20, 20, 32, 1, 34, 90],
                markLine: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                }
            }]
        };
        optionManualPaintFlow = {
            title: {
                text: '手动喷房流量',
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '20%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                top: 10,
                right: 10,
                data: ['手动喷房流量'],
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dateAxis
            },
            yAxis: [{
                type: 'value',
                name: '流量',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} M^3/s'
                },
            }],
            series: [{
                name: '手动喷房流量',
                type: 'line',
                data: [30, 20, 20, 32, 1, 34, 90],
                markLine: {
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                }
            }]
        };
        if (!!optionManualPaintFlow && !!optionManualPaintPressure) {
            manualPaintFlowChart.setOption(optionManualPaintFlow, true);
            manualPaintPressureChart.setOption(optionManualPaintPressure, true);
            autoPaintPressureChart.setOption(optionAutoPaintPressure, true);
            autoPaintFlowChart.setOption(optionAutoPaintFlow, true);
            displayLanguage = 'chinese';
        }
        $(document).ready(function () {
            $("#language-change").click(function () {
                if (displayLanguage === 'chinese') {
                    $("#title").text("Paint Control Room");
                    manualPaintPressureChart.setOption({
                        title: {
                            text: 'Manual Paint Pressure',
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            top: '20%',
                            bottom: '3%',
                            containLabel: true
                        },
                        legend: {
                            top: 10,
                            right: 10,
                            data: ['Pump A', 'Pump B'],
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dateAxis,
                        },
                        yAxis: [{
                            type: 'value',
                            name: 'Pressure',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} KPa'
                            },
                        }],
                        series: [{
                            name: 'Pump A',
                            type: 'line',
                            data: [20, 32, 1, 34, 90, 30, 20],
                            markLine: {
                                data: [{
                                        type: 'max',
                                        name: 'Max'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            }
                        }, {
                            name: 'Pump B',
                            type: 'line',
                            data: [32, 1, 34, 90, 30, 20, 20],
                            markLine: {
                                data: [{
                                        type: 'max',
                                        name: 'Max'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            }
                        }]
                    });
                    autoPaintFlowChart.setOption({
                        title: {
                            text: 'Auto Paint Flow',
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            top: '20%',
                            bottom: '3%',
                            containLabel: true
                        },
                        legend: {
                            top: 10,
                            right: 10,
                            data: ['Auto Paint Flow'],
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dateAxis
                        },
                        yAxis: [{
                            type: 'value',
                            name: 'Flow',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} M^3/s'
                            },
                        }],
                        series: [{
                            name: 'Auto Paint Flow',
                            type: 'line',
                            data: [30, 20, 20, 32, 1, 34, 90],
                            markLine: {
                                data: [{
                                        type: 'max',
                                        name: 'Max'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            }
                        }]
                    });
                    manualPaintFlowChart.setOption({
                        title: {
                            text: 'Manual Paint Flow',
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            top: '20%',
                            bottom: '3%',
                            containLabel: true
                        },
                        legend: {
                            top: 10,
                            right: 10,
                            data: ['Manual Paint Flow'],
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dateAxis
                        },
                        yAxis: [{
                            type: 'value',
                            name: 'Flow',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} M^3/s'
                            },
                        }],
                        series: [{
                            name: 'Manual Paint Flow',
                            type: 'line',
                            data: [30, 20, 20, 32, 1, 34, 90],
                            markLine: {
                                data: [{
                                        type: 'max',
                                        name: 'Max'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            }
                        }]
                    });
                    autoPaintPressureChart.setOption({
                        title: {
                            text: 'Auto Paint Pressure',
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            top: '20%',
                            bottom: '3%',
                            containLabel: true
                        },
                        legend: {
                            top: 10,
                            right: 10,
                            data: ['Pump A', 'Pump B'],
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dateAxis,
                        },
                        yAxis: [{
                            type: 'value',
                            name: 'Pressure',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} KPa'
                            },
                        }],
                        series: [{
                            name: 'Pump A',
                            type: 'line',
                            data: [20, 32, 1, 34, 90, 30, 20],
                            markLine: {
                                data: [{
                                        type: 'max',
                                        name: 'Max'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            }
                        }, {
                            name: 'Pump B',
                            type: 'line',
                            data: [32, 1, 34, 90, 30, 20, 20],
                            markLine: {
                                data: [{
                                        type: 'max',
                                        name: 'Max'
                                    },
                                    {
                                        type: 'min',
                                        name: 'Min'
                                    }
                                ]
                            }
                        }]
                    });
                    displayLanguage = 'English';
                } else {
                    manualPaintFlowChart.setOption(optionManualPaintFlow, true);
                    manualPaintPressureChart.setOption(optionManualPaintPressure, true);
                    autoPaintPressureChart.setOption(optionAutoPaintPressure, true);
                    autoPaintFlowChart.setOption(optionAutoPaintFlow, true);
                    displayLanguage = 'chinese';
                    $("#title").text("调漆室");
                }
            });
        });
    </script>

</body>

</html>